<template>
	<!-- 医师列表 -->
	<view class="physician-list">
		<view class="item" v-for="(item,index) in dataOptions" :key="index">
			<view class="image" @click="()=>$emit('open',item)">
				<image :src="item.image"></image>
				<view class="level">{{item.level}}</view>
			</view>
			<view class="name-star" @click="()=>$emit('open',item)">
				<text class="name">{{item.name}}</text>
				<view class="icon"><u-icon name="star" color="#FF8C40" :size="16"></u-icon>{{item.star}}</view>

			</view>
			<view class="bottom">
				<view class="left" @click="()=>$emit('open',item)">
					<view class="address">{{item.address}}</view>
					<view class="price">
						<text class="icon">￥</text>
						<text class="number">{{item.price}}</text>
						<text class="time">/小时</text>
					</view>
				</view>
				<view class="button" @click="()=>$emit('appointment',item)">预约</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "physicianList",
		emits: ['appointment', 'open'],
		props: {
			data: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			data: {
				handler(newData) {
					this.dataOptions = newData;
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				dataOptions: []
			};
		}
	}
</script>

<style lang="scss" scoped>
	.physician-list {

		display: flex;
		gap: 22rpx;
		flex-wrap: wrap;

		.item {
			background-color: #FFF;
			border-radius: 16rpx;

			.image {
				position: relative;

				image {
					width: 340rpx;
					height: 396rpx;
				}

				.level {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 64rpx;

					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					background: linear-gradient(90deg, rgba(43, 240, 181, 0.4) 0%, rgba(68, 212, 168, 0.4) 100%);
				}
			}

			.name-star {
				margin-top: 16rpx;
				padding: 0 16rpx;
				display: flex;
				justify-content: space-between;

				.name {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(54, 68, 79, 1);
				}

				.icon {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(54, 68, 79, 1);
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-bottom: 16rpx;
				;

				.left {
					padding-left: 16rpx;

					.address {
						margin-top: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(94, 103, 110, 1);
					}

					.price {
						margin-top: 16rpx;
						color: rgba(255, 140, 64, 1);

						.icon {
							font-size: 20rpx;
							font-weight: 500;
						}

						.number {
							font-size: 28rpx;
							font-weight: 600;
						}

						.time {
							font-size: 22rpx;
							font-weight: 400;
						}
					}
				}

				.button {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 112rpx;
					height: 48rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					border-radius: 24rpx;
					background: $theme-color;
					margin-right: 16rpx;
				}
			}
		}

	}
</style>